<template>
  <router-link to="/login" v-if="!props.user.isLogin">
    <a-button type="primary" class="user-profile-component"> 登录 </a-button>
  </router-link>
  <div v-else>
    <a-dropdown-button class="user-profile-component">
      <router-link to="/setting">123</router-link>
      <template v-slot:overlay>
        <a-menu class="user-profile-dropdown">
          <a-menu-item key="0" @click="createDesign">创建作品</a-menu-item>
          <a-menu-item key="1"><router-link to="/works">我的作品</router-link></a-menu-item>
          <a-menu-item key="2" @click="logout">登出</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown-button>
  </div>
</template>
<script lang="ts" setup>
import { ref, PropType, defineProps } from 'vue';
import { useStore } from 'vuex';
import { UserProps } from '../store/user';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
const props: any = defineProps({
  user: {
    type: Object as PropType<UserProps>,
    required: true
  }
});
const router = useRouter();

const store = useStore();

// 创建作品
const createDesign = () => {
  console.log('createDesign');
};

// 登出
const logout = () => {
  store.commit('logout');
  message.success('退出登录成功，2秒后跳转到首页', 2);
  setTimeout(() => {
    router.push('/');
  }, 2000);
  console.log('logout');
};
console.log(store.state, 'store');
</script>

<style scoped>
.user-profile-dropdown {
  border-radius: 2px !important;
}

.user-operation > * {
  margin-left: 30px !important;
}
</style>
